<template>
  <view class="date-list-wrap">
		<view class="active" :style="{left: left+'px'}"></view>
    <view class="item"  v-for="(item,index) of newList" :key="index" @click="handleChange(index)">
      <view class="week desc" :class="{current: indexActive === index}">{{item.week}}</view>
			<view class="date desc" :class="{current: indexActive === index}">{{item.date}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'deteList',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
		indexActive: {
		  type: Number,
		  default: 0
		}
  },
	data() {
		return{
      left: 0
		}
	},
	computed:{
		newList() {
			const result = []
			const day = ['一', '二','三','四','五','六','日']
			this.list.map((item, index) => {
				result.push({
					date: item.substr(8),
					week: day[index]
				})
			})
			return result
		}
  },
  watch:{
    indexActive: {
      handler: function(index) {
        const nums = [20,113,205,298,391,484,577]
				this.left = uni.upx2px(nums[index])
      },
      immediate: true
    },
  },
	methods: {
		handleChange(index) {
			this.$emit('update:indexActive', index)
		}
  }
  // 20 113 205 298 391 484 577
}

</script>
<style lang='scss' scoped>
.date-list-wrap{
  width:714upx;
  height:144upx;
	background-color: rgba(255,255,255,.4);
  border:2upx solid rgba(255,255,255,1);
  border-radius:72upx;
	padding: 0 30upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	position: relative;
  .item{
    width:118upx;
    height:118upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
		.desc{
			font-size: 30upx;
			color: #fff;
			font-weight:800;
		}
		.current{
			color: #333;
		}
  }
	.active{
		width:116upx;
		height:116upx;
		background-color: #fff;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
	}
}
</style>